<!--
 * @Description: 首页组件
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-02-27 13:36:12
 -->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
          <img style="height:460px;" :src="$target + item.imgPath" :alt="item.describes"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->
    <div class="main-box">
      <div class="main">
        <!-- 百亿补贴活动展示区域 -->
        <div class="phone">
          <div class="box-hd">
            <div class="title">百亿补贴</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <router-link :to="{path:'/'}">
                <img :src="require('../assets/imgs/static/newGoods.jpg')" style="width:234px;height:654px;object-fit:cover;"
                />
              </router-link>
            </div>
            <div class="list">
              <MallList :list="goodsByActivity" :isActivity="true"></MallList>
            </div>
          </div>
        </div>
        <!-- 百亿补贴活动展示区域END -->

        <!-- 新商品展示区域 -->
        <div class="phone">
          <div class="box-hd">
            <div class="title">新上架商品</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <router-link :to="{path:'/'}">
                <img :src="require('../assets/imgs/static/newGoods.jpg')" style="width:234px;height:654px;object-fit:cover;"
                />
              </router-link>
            </div>
            <div class="list">
              <MallList :list="goodsListByCreattime" :isMore="true"></MallList>
            </div>
          </div>
        </div>
        <!-- 新商品展示区域END -->

        <!-- 销量最高商品展示区域 -->
        <div class="appliance" id="promo-menu2">
          <div class="box-hd">
            <div class="title">销冠专区</div>
            <div class="more" id="more2">
              <MallMenu :val="5" @fromChild="getChildMsg">
                <span slot="4"> 综合</span>
                <span slot="5"> 热门</span>
              </MallMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="require('../assets/imgs/static/aedfh_1.jpg')" style="width:234px;height:320px;object-fit:cover;"
                  />
                </li>
                <li>
                  <img :src="require('../assets/imgs/static/aedfh_2.jpg')" style="width:234px;height:320px;object-fit:cover;"
                  />
                </li>
              </ul>
            </div>
            <div class="list">
              <MallList :list="goodsListBySale" :isMore="true"></MallList>
            </div>
          </div>
        </div>
        <!-- 销量最高商品展示区域END -->

        <!-- 水果商品展示区域 -->
        <div class="accessory" id="promo-menu">
          <div class="box-hd">
            <div class="title">水果</div>
            <div class="more" id="more">
              <MallMenu :val="10" :caid="9" @fromChild="getChildMsg2">
                <span slot="2">价格</span>
                <span slot="4">综合</span>
                <span slot="5">热门</span>
                <span slot="10">上架时间</span>
              </MallMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="require('../assets/imgs/static/newFruit.jpg')" style="width:234px;height:320px;object-fit:cover;"/>
                </li>
                <li>
                  <img :src="require('../assets/imgs/static/newFruit2.jpg')" style="width:234px;height:320px;object-fit:cover;"/>
                </li>
              </ul>
            </div>
            <div class="list">
              <MallList :list="goodsFruitListByCreattime" :isMore="true"></MallList>
            </div>
          </div>
        </div>
        <!-- 水果商品展示区域END -->

        <!-- 手机商品展示区域 -->
        <div class="accessory" id="promo-menu3">
          <div class="box-hd">
            <div class="title">手机</div>
            <div class="more" id="more3">
              <MallMenu :val="10" :caid="8" @fromChild="getChildMsg3">
                <span slot="2">价格</span>
                <span slot="4">综合</span>
                <span slot="5">热门</span>
                <span slot="10">上架时间</span>
              </MallMenu>
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="require('../assets/imgs/static/redmik40s.jpg')" style="width:234px;height:320px;object-fit:cover;"/>
                </li>
                <li>
                  <img :src="require('../assets/imgs/static/redmik50pro.jpg')" style="width:234px;height:320px;object-fit:cover;"/>
                </li>
              </ul>
            </div>
            <div class="list">
              <MallList :list="goodsPhoneListByCreattime" :isMore="true"></MallList>
            </div>
          </div>
        </div>
        <!-- 手机商品展示区域END -->

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      /**
       * @商品数据-百亿补贴活动
       * */
      goodsByActivity:this.$store.state.List.GoodsVo,
      /**
       * @商品手机数据-按时间排序
       * */
      goodsPhoneListByCreattime:this.$store.state.List.GoodsVo,
      /**
       * @商品水果数据-按时间排序
       * */
      goodsFruitListByCreattime:this.$store.state.List.GoodsVo,
      /**
       * @商品数据-按销量排序
       * */
      goodsListBySale:this.$store.state.List.GoodsVo,
      /**
       * @商品数据-按时间排序
       * */
      goodsListByCreattime:this.$store.state.List.GoodsVo,
      carousel: "", // 轮播图数据
      phoneList: "", // 手机商品列表
      miTvList: "", // 小米电视商品列表
      applianceList: "", // 家电商品列表
      applianceHotList: "", //热门家电商品列表
      accessoryList: "", //配件商品列表
      accessoryHotList: "", //热门配件商品列表
      protectingShellList: "", // 保护套商品列表
      chargerList: "", //充电器商品列表
      applianceActive: 1, // 家电当前选中的商品分类
      accessoryActive: 1 // 配件当前选中的商品分类
    };
  },
  /**
   * @计算数据
   * */
  computed: {
    /**
     * @通用函数
     * */
    helper() {
      return this.$helper;
    },
    /**
     * @全局变量
     * */
    state() {
      return this.$store.state;
    }
  },
  watch: {
    // 家电当前选中的商品分类，响应不同的商品数据
    applianceActive: function (val) {
      // 页面初始化的时候把applianceHotList(热门家电商品列表)直接赋值给applianceList(家电商品列表)
      // 所以在切换商品列表时判断applianceHotList是否为空,为空则是第一次切换,把applianceList赋值给applianceHotList
      if (this.applianceHotList == "") {
        this.applianceHotList = this.applianceList;
      }
      if (val == 1) {
        // 1为热门商品
        this.applianceList = this.applianceHotList;
        return;
      }
      if (val == 2) {
        // 2为电视商品
        this.applianceList = this.miTvList;
        return;
      }
    },
    accessoryActive: function (val) {
      // 页面初始化的时候把accessoryHotList(热门配件商品列表)直接赋值给accessoryList(配件商品列表)
      // 所以在切换商品列表时判断accessoryHotList是否为空,为空则是第一次切换,把accessoryList赋值给accessoryHotList
      if (this.accessoryHotList == "") {
        this.accessoryHotList = this.accessoryList;
      }
      if (val == 1) {
        // 1为热门商品
        this.accessoryList = this.accessoryHotList;
        return;
      }
      if (val == 2) {
        // 2为保护套商品
        this.accessoryList = this.protectingShellList;
        return;
      }
      if (val == 3) {
        //3 为充电器商品
        this.accessoryList = this.chargerList;
        return;
      }
    }
  },
  created() {
    this.loadStaticMsg();
    this.loadGoods();
  },
  methods: {
    /**
     * @导入百亿补贴活动商品
     * */
    loadGoodsByActivity(){
      let _this = this;
      this.$axios.post(this.$store.state.baseURL + 'client/' + this.state.controller.Goods + '/query?' + 'OperatorId=1' ,
          {
            "page": 1,
            "pageSize": 10,
            "sortType": 1,
            "sortBy": 10,
            "activity.name":'百亿补贴',
            "state":1,
          })
          .then(res => {
            _this.goodsByActivity = res.data.goodsVoList;
            //console.log(res.data);
          })
    },
    /**
     * @初始化-导入商品数据(水果-上架时间,前10个)
     * */
    loadGoodsPhoneByCreattime(){
      let _this = this;
      this.$axios.post(this.$store.state.baseURL + 'client/' + this.state.controller.Goods + '/query?' + 'OperatorId=1' ,
          {
            "page": 1,
            "pageSize": 10,
            "sortType": 1,
            "sortBy": 10,
            "card.caid":8,
            "state":1,
          })
          .then(res => {
            _this.goodsPhoneListByCreattime = res.data.goodsVoList;
            //console.log(res.data);
          })
    },
    /**
     * @获取手机商品数据
     * */
    getChildMsg3(val){
      this.goodsPhoneListByCreattime=val;
    },
    /**
     * @初始化-导入商品数据(水果-上架时间,前10个)
     * */
    loadGoodsFruitByCreattime(){
      let _this = this;
      this.$axios.post(this.$store.state.baseURL + 'client/' + this.state.controller.Goods + '/query?' + 'OperatorId=1' ,
          {
            "page": 1,
            "pageSize": 10,
            "sortType": 1,
            "sortBy": 10,
            "card.caid":9,
            "state":1,
          })
          .then(res => {
            _this.goodsFruitListByCreattime = res.data.goodsVoList;
            //console.log(res.data);
          })
    },
    /**
     * @初始化-导入商品数据(销量,前10个)
     * */
    loadGoodsBySale(){
      let _this = this;
      this.$axios.post(this.$store.state.baseURL + 'client/' + this.state.controller.Goods + '/query?' + 'OperatorId=1' ,
          {
            "page": 1,
            "pageSize": 10,
            "sortType": 1,
            "sortBy": 5,
            "state":1,
          })
          .then(res => {
            _this.goodsListBySale = res.data.goodsVoList;
            //console.log(res.data);
          })
    },
    /**
     * @初始化-导入商品数据(新商品,前10个)
     * */
    loadGoodsByCreattime(){
      let _this = this;
      this.$axios.post(this.$store.state.baseURL + 'client/' + this.state.controller.Goods + '/query?' + 'OperatorId=1' ,
          {
            "page": 1,
            "pageSize": 10,
            "sortType": 1,
            "sortBy": 10,
            "state":1,
          })
          .then(res => {
            _this.goodsListByCreattime = res.data.goodsVoList;
            //console.log(res.data);
          })
    },
    /**
     * @初始化-导入商品数据
     * */
    loadGoods(){
      this.loadGoodsByCreattime();
      this.loadGoodsBySale();
      this.loadGoodsFruitByCreattime();
      this.loadGoodsPhoneByCreattime();
      this.loadGoodsByActivity();
    },
    /**
     * @获取商品数据
     */
    searchGoods(val){

    },
    /**
     * @静态数据初始化
     * */
    loadStaticMsg(){
      // 获取轮播图数据
      this.$axios
          .post("/api/resources/carousel", {})
          .then(res => {
            this.carousel = res.data.carousel;
          })
          .catch(err => {
            return Promise.reject(err);
          });
      // 获取各类商品数据
      this.getPromo("手机", "phoneList");
      this.getPromo("电视机", "miTvList");
      this.getPromo("保护套", "protectingShellList");
      this.getPromo("充电器", "chargerList");
      this.getPromo(
          ["电视机", "空调", "洗衣机"],
          "applianceList",
          "/api/product/getHotProduct"
      );
      this.getPromo(
          ["保护套", "保护膜", "充电器", "充电宝"],
          "accessoryList",
          "/api/product/getHotProduct"
      );
    },
    // 获取家电模块子组件传过来的数据
    getChildMsg(val) {
      //console.log(val);
      this.goodsListBySale = val;
    },
    // 获取配件模块子组件传过来的数据
    getChildMsg2(val) {
      this.goodsFruitListByCreattime = val;
    },
    // 获取各类商品数据方法封装
    getPromo(categoryName, val, api) {
      api = api != undefined ? api : "/api/product/getPromoProduct";
      this.$axios
          .post(api, {
            categoryName
          })
          .then(res => {
            this[val] = res.data.Product;
          })
          .catch(err => {
            return Promise.reject(err);
          });
    }
  }
};
</script>
<style scoped>
@import "../assets/css/index.css";
</style>